<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .linear-gradient {
            /* background: linear-gradient(red,blue);
             /*background: linear-gradient(to right,red,blue);//改变方向
             /*background: linear-gradient(to right top,red,blue);//对角线渐变 
             /*background: linear-gradient(70deg,red,blue);//设置渐变角度*/
            /* background: linear-gradient(red, yellow, blue, orange);设置多种颜色 */
            /* background: linear-gradient(to left, lime 28px, red 77%, cyan);设置多种颜色终止位置 */
            /* 创建实线 */
            /* background: linear-gradient(to right bottom,lime 50%, #fff 50%); */
            /* 设置渐变中心 */
            /* background: linear-gradient(transparent,10% pink), url('happy.png'); */
            /* 设置图片 */
            background: linear-gradient(transparent, pink), url('happy.png');
            height: 200px;
            width: 200px;
        }

        .text {
            background: linear-gradient(135deg, #987687 50px, #912329);
            height: 200px;
            width: 200px;
        }

        .text2 {
            border: #912329 1px solid;
            /* 左下
            background: linear-gradient(45deg, transparent 20%, #912329 20%); */
            /* 左 
            background: linear-gradient(90deg, transparent 20%, #912329 20%);*/
            /*左上 */
            /* background: linear-gradient(135deg, transparent 50PX, #912329 0); */
            /* 上 */
            /* background: linear-gradient(180deg, transparent 50PX, #912329 0); */
            /* 右下 */
            /* background: linear-gradient(-45deg, transparent 50PX, #912329 0); */
            /* 右 */
            /* background: linear-gradient(-90deg, transparent 50PX, #912329 0); */
            /* 右上 */
            /* background: linear-gradient(-135deg, transparent 50PX, #912329 0);   */
            /* 上 */
            /* background: linear-gradient(-180deg, transparent 50PX, #912329 0);             */
            height: 200px;
            width: 200px;
        }

        .test3 {
            background: linear-gradient(135deg, transparent 50px, red 0);
            padding: 4px;
            height: 200px;
            width: 200px;
            box-sizing: border-box;
            margin-top: 5px;
        }

        .test4 {
            background: linear-gradient(135deg, transparent 48.5px, #fff 0);
            height: 100%;
            width: 100%;
        }

        .test5 {
            background-color: aquamarine;
            height: 250px;
            width: 500px;
        }

        .test6 {
            background: linear-gradient(135deg, transparent 50px, red 0) top left,
                linear-gradient(-135deg, transparent 50px, red 0) top right,
                linear-gradient(-45deg, transparent 0, red 0) bottom right,
                linear-gradient(45deg, transparent 0,red 0) bottom left;
            height: 200px;
            width: 200px;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="test6">两个缺角矩形</div>
    <div class="linear-gradient"></div>
    <div class="text">123123123</div>
    <div class="text2">缺角矩形</div>
    <div class="test5">
        <div class="test3">
            <div class="test4">
                缺角带边框矩形
            </div>
        </div>
    </div>
</body>

</html>